<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/angular.js" charset="utf-8"></script>
    </head>
    <body ng-app="MyApp">

        <h1>{{ name }}</h1>

        <button ng-click="show()">按钮</button>

        <div ng-controller="ParentCtrl">



            <div ng-controller="ChildCtrl">

                <h2>{{ name }}</h2>
                <h2>{{ $parent.name }}</h2>

                <button ng-click="sayHi()">SayHi</button>

            </div>

            <div ng-controller="ChildCtrl2">

                <h2>{{ name }}</h2>

            </div>

        </div>

    </body>
    <script type="text/javascript">

        angular.module('MyApp', [])

        .controller('ParentCtrl', ['$scope', function ($scope, $rootScope) {
            $scope.name = 'parent name';


        }])

        .controller('ChildCtrl', ['$scope', '$rootScope', function ($scope, $rootScope) {
            $scope.name = 'child name';

            // 将子控制器中的值添加到$rootScope的value属性上
            $rootScope.value = $scope.name;


            // $scope代表当前控制器的作用域，可用传递到子控制器内部
            // $scope.$parent 父控制器
            // $scope.$parent.$parent ...
            // $rootScope 根控制器范围的名称，只要在$rootScope上面添加的数据或函数，在任何地方都可以访问
            // 注意：不要乱用$rootScope
            $rootScope.name = 'root name';
            $rootScope.show = function () {
                console.log('$rootScope show');
                console.log(this);
            };

            console.log($scope);

            $scope.sayHi = function () {
                console.log(this);
                console.log($scope === this);
                console.log('say hi');

                $scope.name = 'hahaha';
                // this.name = 'hehehe';
            };

            // 子控制器，可用获取父控制器中传递过来的数据，通过 $parent 属性即可
            console.log($scope.$parent.name);
        }])


        .controller('ChildCtrl2', ['$scope', '$rootScope', function ($scope, $rootScope) {

            // 从$rootScope中的value属性中取值，放到自己的作用域中
            $scope.name = $rootScope.value;

        }])



    </script>
</html>
